<template>
  <view class="membership-page">
    <!-- 会员等级展示 -->
    <view class="membership-levels">
      <view class="level-card" :class="{ 'active': selectedLevel === 'monthly' }" @click="selectLevel('monthly')">
        <view class="level-header">
          <text class="level-title">月度会员</text>
          <text class="level-price">¥19.9/月</text>
        </view>
        <view class="level-features">
          <view class="feature-item">
            <up-icon name="checkmark-circle-fill" color="#4ecdc4" size="16"></up-icon>
            <text>高清作品下载</text>
          </view>
          <view class="feature-item">
            <up-icon name="checkmark-circle-fill" color="#4ecdc4" size="16"></up-icon>
            <text>专属展览预约</text>
          </view>
          <view class="feature-item">
            <up-icon name="checkmark-circle-fill" color="#4ecdc4" size="16"></up-icon>
            <text>名师课程7折</text>
          </view>
        </view>
        <view class="level-badge" v-if="selectedLevel === 'monthly'">
          <text>推荐</text>
        </view>
      </view>

      <view class="level-card" :class="{ 'active': selectedLevel === 'annual' }" @click="selectLevel('annual')">
        <view class="level-header">
          <text class="level-title">年度会员</text>
          <text class="level-price">¥159/年</text>
        </view>
        <view class="original-price">原价¥238.8</view>
        <view class="level-features">
          <view class="feature-item">
            <up-icon name="checkmark-circle-fill" color="#4ecdc4" size="16"></up-icon>
            <text>无限次高清下载</text>
          </view>
          <view class="feature-item">
            <up-icon name="checkmark-circle-fill" color="#4ecdc4" size="16"></up-icon>
            <text>专属展览优先入场</text>
          </view>
          <view class="feature-item">
            <up-icon name="checkmark-circle-fill" color="#4ecdc4" size="16"></up-icon>
            <text>名师课程5折</text>
          </view>
          <view class="feature-item">
            <up-icon name="checkmark-circle-fill" color="#4ecdc4" size="16"></up-icon>
            <text>专属客服</text>
          </view>
        </view>
        <view class="level-badge" v-if="selectedLevel === 'annual'">
          <text>最划算</text>
        </view>
      </view>

      <view class="level-card" :class="{ 'active': selectedLevel === 'lifetime' }" @click="selectLevel('lifetime')">
        <view class="level-header">
          <text class="level-title">终身会员</text>
          <text class="level-price">¥899</text>
        </view>
        <view class="level-features">
          <view class="feature-item">
            <up-icon name="checkmark-circle-fill" color="#4ecdc4" size="16"></up-icon>
            <text>永久高清下载权限</text>
          </view>
          <view class="feature-item">
            <up-icon name="checkmark-circle-fill" color="#4ecdc4" size="16"></up-icon>
            <text>VIP展览免费入场</text>
          </view>
          <view class="feature-item">
            <up-icon name="checkmark-circle-fill" color="#4ecdc4" size="16"></up-icon>
            <text>名师课程3折</text>
          </view>
          <view class="feature-item">
            <up-icon name="checkmark-circle-fill" color="#4ecdc4" size="16"></up-icon>
            <text>专属定制服务</text>
          </view>
          <view class="feature-item">
            <up-icon name="checkmark-circle-fill" color="#4ecdc4" size="16"></up-icon>
            <text>线下活动优先参与</text>
          </view>
        </view>
        <view class="level-badge" v-if="selectedLevel === 'lifetime'">
          <text>尊享</text>
        </view>
      </view>
    </view>

    <!-- 会员专享内容 -->
    <view class="exclusive-content">
      <view class="section-title">
        <up-icon name="gift" color="#333" size="18"></up-icon>
        <text>会员专享内容</text>
      </view>
      
      <up-waterfall :addTimes="1" :columns="2" ref="waterfallRef" v-model:status="loadStatus">
        <template #left="{ leftList }">
          <view class="content-item" v-for="(item, index) in leftList" :key="index" @click="viewContent(item)">
            <image :src="item.cover" class="content-cover" mode="aspectFill"></image>
            <view class="content-info">
              <text class="content-title">{{ item.title }}</text>
              <view class="content-meta">
                <up-icon name="person" size="12" color="#999"></up-icon>
                <text class="meta-text">{{ item.author }}</text>
              </view>
            </view>
            <view class="vip-tag" v-if="item.isVip">
              <up-icon name="vip" size="12" color="#FFD700"></up-icon>
              <text>VIP专享</text>
            </view>
          </view>
        </template>
        <template #right="{ rightList }">
          <view class="content-item" v-for="(item, index) in rightList" :key="index" @click="viewContent(item)">
            <image :src="item.cover" class="content-cover" mode="aspectFill"></image>
            <view class="content-info">
              <text class="content-title">{{ item.title }}</text>
              <view class="content-meta">
                <up-icon name="person" size="12" color="#999"></up-icon>
                <text class="meta-text">{{ item.author }}</text>
              </view>
            </view>
            <view class="vip-tag" v-if="item.isVip">
              <up-icon name="vip" size="12" color="#FFD700"></up-icon>
              <text>VIP专享</text>
            </view>
          </view>
        </template>
      </up-waterfall>
    </view>

    <!-- 会员特权 -->
    <view class="membership-benefits">
      <view class="section-title">
        <up-icon name="medal" color="#333" size="18"></up-icon>
        <text>会员特权</text>
      </view>
      
      <view class="benefits-grid">
        <view class="benefit-item">
          <up-icon name="download" size="24" color="#4ecdc4"></up-icon>
          <text class="benefit-title">高清下载</text>
          <text class="benefit-desc">无水印高清作品下载</text>
        </view>
        <view class="benefit-item">
          <up-icon name="ticket" size="24" color="#4ecdc4"></up-icon>
          <text class="benefit-title">展览预约</text>
          <text class="benefit-desc">专属展览优先预约权</text>
        </view>
        <view class="benefit-item">
          <up-icon name="videocam" size="24" color="#4ecdc4"></up-icon>
          <text class="benefit-title">课程折扣</text>
          <text class="benefit-desc">名师课程专属折扣</text>
        </view>
        <view class="benefit-item">
          <up-icon name="headset" size="24" color="#4ecdc4"></up-icon>
          <text class="benefit-title">专属客服</text>
          <text class="benefit-desc">7x24小时专属服务</text>
        </view>
      </view>
    </view>

    <!-- 订阅按钮 -->
    <view class="subscribe-section">
      <up-button 
        type="primary" 
        size="large" 
        class="subscribe-btn"
        @click="subscribePlan"
      >
        立即开通{{ selectedLevel === 'monthly' ? '月度' : selectedLevel === 'annual' ? '年度' : '终身' }}会员
      </up-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// 页面数据
const bgColor = ref('#fff')
const selectedLevel = ref('annual')
const loadStatus = ref('loadmore')

// 专享内容数据
const exclusiveContent = reactive([
  {
    id: 1,
    title: '王羲之真迹高清解析',
    author: '书法研究院',
    cover: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    isVip: true
  },
  {
    id: 2,
    title: '颜真卿楷书技法详解',
    author: '书法大师',
    cover: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    isVip: true
  },
  {
    id: 3,
    title: '草书演变史',
    author: '历史学者',
    cover: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    isVip: true
  },
  {
    id: 4,
    title: '篆刻艺术精品集',
    author: '篆刻名家',
    cover: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    isVip: true
  },
  {
    id: 5,
    title: '行书创作技巧',
    author: '书法家协会',
    cover: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    isVip: true
  },
  {
    id: 6,
    title: '隶书发展研究',
    author: '文字学专家',
    cover: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    isVip: true
  }
])

// 选择会员等级
const selectLevel = (level) => {
  selectedLevel.value = level
}

// 订阅套餐
const subscribePlan = () => {
  let planName = ''
  let price = 0
  
  switch(selectedLevel.value) {
    case 'monthly':
      planName = '月度会员'
      price = 19.9
      break
    case 'annual':
      planName = '年度会员'
      price = 159
      break
    case 'lifetime':
      planName = '终身会员'
      price = 899
      break
  }
  
  uni.showModal({
    title: '确认订阅',
    content: `是否确认开通${planName}，价格：¥${price}？`,
    success: (res) => {
      if (res.confirm) {
        // 模拟订阅流程
        uni.showToast({
          title: '订阅成功',
          icon: 'success'
        })
        
        // 3秒后跳转到会员中心
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/user/index'
          })
        }, 3000)
      }
    }
  })
}

// 查看内容
const viewContent = (item) => {
  uni.showToast({
    title: '会员专享内容',
    icon: 'none'
  })
}

// 页面初始化
onMounted(() => {
  // 可以在这里加载更多数据
})
</script>

<style lang="scss" scoped>
.membership-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding-bottom: 120rpx;
}

.membership-levels {
  padding: 20rpx;
  
  .level-card {
    position: relative;
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
    border: 2rpx solid #eee;
    transition: all 0.3s ease;
    
    &.active {
      border-color: #4ecdc4;
      transform: translateY(-10rpx);
      box-shadow: 0 8rpx 24rpx rgba(78, 205, 196, 0.2);
    }
    
    .level-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .level-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
      
      .level-price {
        font-size: 36rpx;
        font-weight: bold;
        color: #ff4757;
      }
    }
    
    .original-price {
      font-size: 24rpx;
      color: #999;
      text-decoration: line-through;
      margin-bottom: 15rpx;
    }
    
    .level-features {
      .feature-item {
        display: flex;
        align-items: center;
        margin-bottom: 15rpx;
        
        text {
          font-size: 26rpx;
          color: #666;
          margin-left: 10rpx;
        }
      }
    }
    
    .level-badge {
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      background: #ff4757;
      color: #fff;
      font-size: 20rpx;
      padding: 6rpx 12rpx;
      border-radius: 30rpx;
    }
  }
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 30rpx 30rpx 20rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.exclusive-content {
  background: #fff;
  margin-bottom: 20rpx;
  
  .content-item {
    position: relative;
    margin-bottom: 20rpx;
    border-radius: 15rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    
    .content-cover {
      width: 100%;
      height: 200rpx;
    }
    
    .content-info {
      padding: 20rpx;
      
      .content-title {
        display: block;
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 10rpx;
        line-height: 1.4;
      }
      
      .content-meta {
        display: flex;
        align-items: center;
        
        .meta-text {
          font-size: 22rpx;
          color: #999;
          margin-left: 6rpx;
        }
      }
    }
    
    .vip-tag {
      position: absolute;
      top: 15rpx;
      right: 15rpx;
      display: flex;
      align-items: center;
      background: rgba(255, 215, 0, 0.2);
      color: #FFD700;
      font-size: 20rpx;
      padding: 4rpx 10rpx;
      border-radius: 6rpx;
      
      text {
        margin-left: 4rpx;
      }
    }
  }
}

.membership-benefits {
  background: #fff;
  padding-bottom: 30rpx;
  margin-bottom: 20rpx;
  
  .benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    padding: 0 30rpx;
    
    .benefit-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30rpx 20rpx;
      background: #f9f9f9;
      border-radius: 15rpx;
      
      .benefit-title {
        font-size: 26rpx;
        font-weight: 500;
        color: #333;
        margin: 15rpx 0 10rpx;
      }
      
      .benefit-desc {
        font-size: 22rpx;
        color: #999;
        text-align: center;
      }
    }
  }
}

.subscribe-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
  
  .subscribe-btn {
    width: 100%;
  }
}
</style>